<template>
  <div class="health-container">
    <div class="search-hd">
      <el-form :mode="searchForm" inline>
        <el-form-item label="用户名">
          <el-input
            v-model="searchForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :icon="Search" type="primary" @click="search"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%; height: 680px" border>
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="height" label="身高(cm)" />
      <el-table-column prop="hipline" label="臀围(cm)" />
      <el-table-column prop="waist" label="腰围(cm)" />
      <el-table-column prop="waist" label="体重(kg)" />
    </el-table>
    <el-pagination
      style="float: right; margin: 20px"
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      layout=" prev, pager, next"
      :total="totalNum"
      background
    />
  </div>
</template>

<script setup>
import { healthList } from "@/api/health";
import { onMounted, ref } from "vue";
import { Search } from "@element-plus/icons";

import commonPageRepository from "@/utils/common-page-repository";
import { ElMessage } from "element-plus";
const tableData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const totalNum = ref("");
const searchForm = ref({});
function getHealthList() {
  healthList({
    current: pageNum.value,
    size: pageSize.value,
  }).then((res) => {
    tableData.value = res.data.records;
    totalNum.value = res.data.total;
  });
}
const { pageSizeChange, pageCurrentChange } = commonPageRepository(
  pageSize,
  pageNum,
  getHealthList
);
// 搜索
function search() {
  healthList({
    current: pageNum.value,
    size: pageSize.value,
    username: searchForm.value.username,
  }).then((res) => {
    tableData.value = res.data.records;
    totalNum.value = res.data.total;
    ElMessage.success("查询成功");
  });
}
onMounted(() => {
  getHealthList();
});
</script>

<style lang="scss" scoped></style>
